<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章同步平台 - ArticleSync</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- Custom CSS -->
    <style>
        .sidebar {
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }
        
        .sidebar .nav-link {
            color: rgba(255,255,255,0.8);
            transition: all 0.3s ease;
            border-radius: 0.5rem;
            margin: 0.2rem 0;
        }
        
        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            color: white;
            background-color: rgba(255,255,255,0.2);
            transform: translateX(5px);
        }
        
        .main-content {
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        
        .card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
            transition: all 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
        }
        
        .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 1rem;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .upload-area:hover {
            border-color: #667eea;
            background-color: #f8f9ff;
        }
        
        .upload-area.dragover {
            border-color: #667eea;
            background-color: #e7f3ff;
        }
        
        .platform-card {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .platform-card:hover {
            transform: scale(1.05);
        }
        
        .platform-card.selected {
            border-color: #667eea;
            background-color: #f8f9ff;
        }
        
        .btn-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            transition: all 0.3s ease;
        }
        
        .btn-gradient:hover {
            transform: translateY(-1px);
            box-shadow: 0 0.5rem 1rem rgba(102, 126, 234, 0.4);
            color: white;
        }
        
        .status-badge {
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
        }
        
        .progress-custom {
            height: 1.5rem;
            border-radius: 0.75rem;
        }
        
        .loading-spinner {
            display: none;
        }
        
        .content-section {
            display: none;
        }
        
        .content-section.active {
            display: block;
        }
        
        .file-info {
            background-color: #f8f9fa;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-top: 1rem;
        }
        
        .tag-input {
            min-height: 38px;
        }
        
        .tag-item {
            display: inline-block;
            background-color: #667eea;
            color: white;
            padding: 0.25rem 0.5rem;
            margin: 0.25rem;
            border-radius: 0.25rem;
            font-size: 0.9rem;
        }
        
        .tag-item .remove-tag {
            margin-left: 0.5rem;
            cursor: pointer;
        }
        
        /* 确保模态框中的文本框能够正常响应键盘事件 */
        .modal textarea,
        .modal input[type="text"] {
            pointer-events: auto !important;
            -webkit-user-select: text !important;
            user-select: text !important;
        }
        
        .modal .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        /* 文档预览和编辑器样式 */
        .document-preview {
            background-color: #fff;
            border-radius: 0.5rem;
            border: 1px solid #dee2e6;
            min-height: 400px;
            padding: 1.5rem;
        }
        
        .document-editor {
            min-height: 400px;
        }
        
        .editor-toolbar {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem 0.5rem 0 0;
        }
        
        .editor-toolbar button {
            border: none;
            background: none;
            padding: 0.25rem 0.5rem;
            margin: 0 0.25rem;
            border-radius: 0.25rem;
            color: #6c757d;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .editor-toolbar button:hover {
            background-color: #e9ecef;
            color: #495057;
        }
        
        .editor-textarea {
            border: none;
            border-radius: 0 0 0.5rem 0.5rem;
            resize: vertical;
        }
        
        .editor-textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .image-upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 0.5rem;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 1rem 0;
        }
        
        .image-upload-area:hover {
            border-color: #667eea;
            background-color: #f8f9ff;
        }
        
        .image-preview {
            max-width: 100%;
            max-height: 300px;
            border-radius: 0.5rem;
            margin: 1rem 0;
        }
        
        .editor-split-view {
            display: flex;
            gap: 1rem;
        }
        
        .editor-pane {
            flex: 1;
        }
        
        .preview-pane {
            flex: 1;
            border-left: 1px solid #dee2e6;
            padding-left: 1rem;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-3 col-lg-2 d-md-block sidebar p-3">
                <div class="text-center mb-4">
                    <h4 class="text-white">
                        <i class="fas fa-sync-alt me-2"></i>
                        ArticleSync
                    </h4>
                    <p class="text-white-50 small">多平台内容同步</p>
                </div>
                
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" data-section="upload">
                            <i class="fas fa-upload me-2"></i>
                            内容上传
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-section="articles">
                            <i class="fas fa-file-alt me-2"></i>
                            文章管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-section="videos">
                            <i class="fas fa-video me-2"></i>
                            视频管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-section="platforms">
                            <i class="fas fa-globe me-2"></i>
                            平台管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" data-section="settings">
                            <i class="fas fa-cog me-2"></i>
                            系统设置
                        </a>
                    </li>
                </ul>
            </nav>
            
            <!-- 主内容区 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
                <!-- 头部 -->
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2" id="page-title">内容上传</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <button type="button" class="btn btn-gradient">
                            <i class="fas fa-plus me-2"></i>
                            新建任务
                        </button>
                    </div>
                </div>
                
                <!-- 内容上传区域 -->
                <div id="upload-section" class="content-section active">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <i class="fas fa-cloud-upload-alt me-2"></i>
                                        上传文件
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="upload-area" id="upload-area">
                                        <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                        <h5>拖拽文件到此处或点击选择</h5>
                                        <p class="text-muted">支持 Markdown (.md)、视频文件 (.mp4, .avi, .mov 等)</p>
                                        <input type="file" id="file-input" class="d-none" accept=".md,.mp4,.avi,.mov,.wmv,.flv,.mkv,.webm">
                                        
                                        <!-- accept=".md,.mp4,.avi,.mov,.wmv,.flv,.mkv,.webm" -->
                                    </div>
                                    
                                    <!-- 文件信息显示 -->
                                    <div id="file-info" class="file-info d-none">
                                        <h6>已选择文件:</h6>
                                        <div id="file-details"></div>
                                        
                                        <!-- 文档预览和编辑按钮 -->
                                        <div id="document-actions" class="mt-3 d-none">
                                            <button type="button" class="btn btn-outline-primary btn-sm me-2" id="preview-btn">
                                                <i class="fas fa-eye me-2"></i>
                                                预览文档
                                            </button>
                                            <button type="button" class="btn btn-outline-success btn-sm" id="edit-btn">
                                                <i class="fas fa-edit me-2"></i>
                                                在线编辑
                                            </button>
                                        </div>
                                        
                                        <!-- 文档预览区域 -->
                                        <div id="document-preview-area" class="mt-4 d-none">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-eye me-2"></i>
                                                    文档预览
                                                </h6>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" id="close-preview-btn">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                            <div class="document-preview" id="document-preview-content">
                                                <!-- 预览内容将在这里显示 -->
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 上传进度 -->
                                    <div id="upload-progress" class="mt-3 d-none">
                                        <div class="progress progress-custom">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                                 role="progressbar" style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 内容配置 -->
                            <div class="card mt-4">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <i class="fas fa-cogs me-2"></i>
                                        内容配置
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form id="content-form">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="content-title" class="form-label">标题</label>
                                                    <input type="text" class="form-control" id="content-title" placeholder="输入内容标题">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="content-tags" class="form-label">标签</label>
                                                    <input type="text" class="form-control" id="content-tags" placeholder="输入标签，用逗号分隔">
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="content-description" class="form-label">描述</label>
                                            <textarea class="form-control" id="content-description" rows="3" placeholder="输入内容描述"></textarea>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="cover-image" class="form-label">封面图片</label>
                                                    <input type="file" class="form-control" id="cover-image" accept="image/*">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="scheduled-time" class="form-label">定时发布</label>
                                                    <input type="datetime-local" class="form-control" id="scheduled-time">
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="is-original" checked>
                                                    <label class="form-check-label" for="is-original">
                                                        原创内容
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="join-activity">
                                                    <label class="form-check-label" for="join-activity">
                                                        参加平台活动
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 平台选择 -->
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <i class="fas fa-globe me-2"></i>
                                        选择发布平台
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div id="platforms-list">
                                        <!-- 平台列表将通过JavaScript动态加载 -->
                                    </div>
                                    
                                    <div class="alert alert-info mt-3" style="display: none;" id="auth-tip">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <small>
                                            有平台尚未配置认证信息，请在 
                                            <a href="#" onclick="app.showSection('platforms')" class="alert-link">平台管理</a> 
                                            中配置后再进行发布。
                                        </small>
                                    </div>
                                    
                                    <button type="button" class="btn btn-gradient w-100 mt-3" id="publish-btn">
                                        <i class="fas fa-paper-plane me-2"></i>
                                        开始发布
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 发布状态 -->
                            <div class="card mt-3" id="publish-status" style="display: none;">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-tasks me-2"></i>
                                        发布状态
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div id="publish-progress">
                                        <!-- 发布进度将动态显示 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 文章管理区域 -->
                <div id="articles-section" class="content-section">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-file-alt me-2"></i>
                                文章列表
                            </h5>
                            <div class="input-group" style="width: 300px;">
                                <input type="text" class="form-control" id="article-search" placeholder="搜索文章...">
                                <button class="btn btn-outline-secondary" type="button" id="search-articles-btn">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>标题</th>
                                            <th>状态</th>
                                            <th>创建时间</th>
                                            <th>发布平台</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="articles-table-body">
                                        <!-- 文章列表将通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- 分页 -->
                            <nav aria-label="文章分页">
                                <ul class="pagination justify-content-center" id="articles-pagination">
                                    <!-- 分页按钮将动态生成 -->
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                
                <!-- 视频管理区域 -->
                <div id="videos-section" class="content-section">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-video me-2"></i>
                                视频列表
                            </h5>
                            <div class="input-group" style="width: 300px;">
                                <input type="text" class="form-control" id="video-search" placeholder="搜索视频...">
                                <button class="btn btn-outline-secondary" type="button" id="search-videos-btn">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>标题</th>
                                            <th>时长</th>
                                            <th>状态</th>
                                            <th>创建时间</th>
                                            <th>发布平台</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="videos-table-body">
                                        <!-- 视频列表将通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- 分页 -->
                            <nav aria-label="视频分页">
                                <ul class="pagination justify-content-center" id="videos-pagination">
                                    <!-- 分页按钮将动态生成 -->
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                
                <!-- 平台管理区域 -->
                <div id="platforms-section" class="content-section">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">
                                        <i class="fas fa-globe me-2"></i>
                                        平台配置
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div id="platforms-config">
                                        <!-- 平台配置将动态加载 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-key me-2"></i>
                                        认证信息
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <form id="auth-form">
                                        <div class="mb-3">
                                            <label class="form-label">平台</label>
                                            <select class="form-select" id="auth-platform">
                                                <option value="">选择平台</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">用户标识</label>
                                            <input type="text" class="form-control" id="auth-user" placeholder="用户名/邮箱">
                                        </div>
                                        
                                        <!-- 头条平台特殊cookies配置 -->
                                        <div id="toutiao-cookies-section" class="d-none">
                                            <div class="mb-3">
                                                <label class="form-label">
                                                    头条号Cookies 
                                                    <small class="text-muted">(推荐使用)</small>
                                                </label>
                                                <div class="input-group">
                                                    <textarea class="form-control" id="auth-cookies-toutiao" rows="3" 
                                                             placeholder="点击右侧按钮自动获取，或手动粘贴Cookies"></textarea>
                                                    <button type="button" class="btn btn-outline-primary" id="detect-toutiao-cookies-btn">
                                                        <i class="fas fa-magic me-1"></i>
                                                        自动获取
                                                    </button>
                                                </div>
                                                <small class="form-text text-muted">
                                                    如果自动获取失败，请 
                                                    <a href="#" id="show-cookies-instruction">查看手动获取指引</a>
                                                </small>
                                            </div>
                                            <div class="mb-3">
                                                <button type="button" class="btn btn-outline-info btn-sm" id="validate-cookies-btn">
                                                    <i class="fas fa-check-circle me-1"></i>
                                                    验证Cookies有效性
                                                </button>
                                                <span id="cookies-validation-status" class="ms-2"></span>
                                            </div>
                                        </div>
                                        
                                        <!-- 传统认证方式 -->
                                        <div id="traditional-auth-section">
                                            <div class="mb-3">
                                                <label class="form-label">访问令牌</label>
                                                <textarea class="form-control" id="auth-token" rows="3" placeholder="访问令牌或API密钥"></textarea>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Cookie (可选)</label>
                                                <textarea class="form-control" id="auth-cookies" rows="2" placeholder="Cookie信息"></textarea>
                                            </div>
                                        </div>
                                        
                                        <button type="submit" class="btn btn-gradient w-100">
                                            <i class="fas fa-save me-2"></i>
                                            保存认证信息
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 系统设置区域 -->
                <div id="settings-section" class="content-section">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-cog me-2"></i>
                                系统设置
                            </h5>
                        </div>
                        <div class="card-body">
                            <form id="settings-form">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6>文件上传设置</h6>
                                        <div class="mb-3">
                                            <label class="form-label">最大文件大小 (MB)</label>
                                            <input type="number" class="form-control" value="100">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">上传目录</label>
                                            <input type="text" class="form-control" value="./uploads">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <h6>发布设置</h6>
                                        <div class="mb-3">
                                            <label class="form-label">最大重试次数</label>
                                            <input type="number" class="form-control" value="3">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">重试间隔 (分钟)</label>
                                            <input type="number" class="form-control" value="5">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-4">
                                    <button type="submit" class="btn btn-gradient">
                                        <i class="fas fa-save me-2"></i>
                                        保存设置
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary ms-2">
                                        <i class="fas fa-undo me-2"></i>
                                        重置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <!-- 头条Cookies获取指引模态框 -->
    <div class="modal fade" id="toutiaoCookiesModal" tabindex="-1" aria-labelledby="toutiaoCookiesModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="toutiaoCookiesModalLabel">
                        <i class="fas fa-cookie-bite me-2"></i>
                        头条号Cookies获取指引
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        请按以下步骤获取头条号Cookies：
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <h6>步骤1：登录头条号</h6>
                            <p>在浏览器中打开 <a href="https://mp.toutiao.com/" target="_blank">https://mp.toutiao.com/</a> 并登录您的头条号账户。</p>
                            
                            <h6>步骤2：打开开发者工具</h6>
                            <p>登录成功后，按 <kbd>F12</kbd> 或右键点击页面选择"检查元素"打开开发者工具。</p>
                            
                            <h6>步骤3：查看Network标签</h6>
                            <p>切换到 <strong>Network（网络）</strong> 标签页。</p>
                        </div>
                        <div class="col-md-6">
                            <h6>步骤4：刷新页面</h6>
                            <p>在Network标签页中，刷新当前页面 <kbd>Ctrl+R</kbd> 或 <kbd>F5</kbd>。</p>
                            
                            <h6>步骤5：查找请求</h6>
                            <p>在请求列表中找到任意一个对 <code>mp.toutiao.com</code> 的请求，点击该请求。</p>
                            
                            <h6>步骤6：复制Cookies</h6>
                            <p>在右侧的请求详情中，找到 <strong>Request Headers</strong>，展开后找到 <code>Cookie:</code> 字段，复制其值。</p>
                        </div>
                    </div>
                    
                    <div class="alert alert-warning mt-3">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>注意：</strong> Cookies包含您的登录信息，请妥善保管，不要泄露给他人。
                    </div>
                    
                    <div class="mt-3">
                        <label class="form-label">将复制的Cookies粘贴到下方文本框：</label>
                        <textarea class="form-control" id="manual-cookies-input" rows="4" 
                                 placeholder="请在此处粘贴复制的Cookie内容..."></textarea>
                        <div class="mt-2">
                            <button type="button" class="btn btn-primary" id="use-manual-cookies-btn">
                                <i class="fas fa-check me-1"></i>
                                使用此Cookies
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="validate-manual-cookies-btn">
                                <i class="fas fa-check-circle me-1"></i>
                                验证有效性
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 在线文档编辑器模态框 -->
    <div class="modal fade" id="documentEditorModal" tabindex="-1" aria-labelledby="documentEditorModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="documentEditorModalLabel">
                        <i class="fas fa-edit me-2"></i>
                        在线编辑器
                    </h5>
                    <div class="ms-auto d-flex align-items-center">
                        <div class="form-check form-switch me-3">
                            <input class="form-check-input" type="checkbox" id="realTimePreview" checked>
                            <label class="form-check-label" for="realTimePreview">
                                实时预览
                            </label>
                        </div>
                        <button type="button" class="btn btn-success me-2" id="saveDocumentBtn">
                            <i class="fas fa-save me-1"></i>
                            保存
                        </button>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                    </div>
                </div>
                <div class="modal-body p-0">
                    <div class="editor-split-view h-100">
                        <!-- 编辑器区域 -->
                        <div class="editor-pane">
                            <div class="editor-toolbar">
                                <button type="button" title="粗体" data-action="bold">
                                    <i class="fas fa-bold"></i>
                                </button>
                                <button type="button" title="斜体" data-action="italic">
                                    <i class="fas fa-italic"></i>
                                </button>
                                <button type="button" title="标题1" data-action="h1">
                                    <i class="fas fa-heading"></i>1
                                </button>
                                <button type="button" title="标题2" data-action="h2">
                                    <i class="fas fa-heading"></i>2
                                </button>
                                <button type="button" title="标题3" data-action="h3">
                                    <i class="fas fa-heading"></i>3
                                </button>
                                <span class="toolbar-separator">|</span>
                                <button type="button" title="无序列表" data-action="ul">
                                    <i class="fas fa-list-ul"></i>
                                </button>
                                <button type="button" title="有序列表" data-action="ol">
                                    <i class="fas fa-list-ol"></i>
                                </button>
                                <button type="button" title="引用" data-action="quote">
                                    <i class="fas fa-quote-right"></i>
                                </button>
                                <button type="button" title="代码" data-action="code">
                                    <i class="fas fa-code"></i>
                                </button>
                                <span class="toolbar-separator">|</span>
                                <button type="button" title="插入链接" data-action="link">
                                    <i class="fas fa-link"></i>
                                </button>
                                <button type="button" title="插入图片" data-action="image" id="insertImageBtn">
                                    <i class="fas fa-image"></i>
                                </button>
                                <button type="button" title="插入表格" data-action="table">
                                    <i class="fas fa-table"></i>
                                </button>
                                <span class="toolbar-separator">|</span>
                                <button type="button" title="撤销" data-action="undo">
                                    <i class="fas fa-undo"></i>
                                </button>
                                <button type="button" title="重做" data-action="redo">
                                    <i class="fas fa-redo"></i>
                                </button>
                            </div>
                            <textarea class="form-control editor-textarea" id="documentEditor" rows="30" 
                                     placeholder="在这里编辑您的文档..."></textarea>
                        </div>
                        
                        <!-- 预览区域 -->
                        <div class="preview-pane" id="documentPreviewPane">
                            <div class="editor-toolbar">
                                <h6 class="mb-0">
                                    <i class="fas fa-eye me-2"></i>
                                    实时预览
                                </h6>
                            </div>
                            <div class="document-preview p-3" id="documentLivePreview">
                                <p class="text-muted text-center mt-5">在左侧编辑器中输入内容，预览将在这里显示...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 图片上传模态框 -->
    <div class="modal fade" id="imageUploadModal" tabindex="-1" aria-labelledby="imageUploadModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageUploadModalLabel">
                        <i class="fas fa-image me-2"></i>
                        插入图片
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>上传新图片</h6>
                            <div class="image-upload-area" id="editorImageUploadArea">
                                <i class="fas fa-image fa-3x text-muted mb-3"></i>
                                <p class="mb-2">点击或拖拽上传图片</p>
                                <small class="text-muted">支持 JPG、PNG、GIF 格式</small>
                                <input type="file" id="editorImageInput" class="d-none" accept="image/*">
                            </div>
                            
                            <div id="uploadImagePreview" class="d-none">
                                <img id="previewImg" class="image-preview" alt="预览">
                                <div class="text-center">
                                    <button type="button" class="btn btn-primary" id="confirmImageUpload">
                                        <i class="fas fa-check me-2"></i>
                                        使用此图片
                                    </button>
                                    <button type="button" class="btn btn-secondary" id="cancelImageUpload">
                                        <i class="fas fa-times me-2"></i>
                                        重新选择
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <h6>或使用网络图片</h6>
                            <div class="mb-3">
                                <label class="form-label">图片URL</label>
                                <input type="url" class="form-control" id="imageUrlInput" 
                                       placeholder="https://example.com/image.jpg">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">图片描述（Alt文本）</label>
                                <input type="text" class="form-control" id="imageAltInput" 
                                       placeholder="图片描述">
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">图片标题（可选）</label>
                                <input type="text" class="form-control" id="imageTitleInput" 
                                       placeholder="图片标题">
                            </div>
                            
                            <button type="button" class="btn btn-primary w-100" id="insertImageFromUrl">
                                <i class="fas fa-plus me-2"></i>
                                插入网络图片
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义JavaScript -->
    <script src="/js/app.js"></script>
</body>
</html>